<template>
  <view>
    <view
      class="borderModule"
      :style="{
        paddingTop: `${info.style.pTop * 2}rpx`,
        paddingLeft: `${info.style.pLeft * 2}rpx`,
        paddingRight: `${info.style.pRight * 2}rpx`,
        paddingBottom: `${info.style.pBottom * 2}rpx`,
        marginTop: `${info.style.mTop * 2}rpx`,
        marginLeft: `${info.style.mLeft * 2}rpx`,
        marginRight: `${info.style.mRight * 2}rpx`,
        marginBottom: `${info.style.mBottom * 2}rpx`,
      }"
    >
      <view
        v-if="info.type == 1"
        class="info1"
        :style="{
          padding: `${(info.style.borderP / 2) * 2}rpx 0px`,
          background: `${info.style.borderBg}`,
        }"
      ></view>
      <view
        v-if="info.type == 2"
        class="info1"
        :style="{
          padding: `${(info.style.borderP / 2) * 2}rpx 0px`,
          background: `${info.style.borderBg}`,
        }"
      >
        <view
          class="border"
          :style="{
            borderTop: `2rpx ${
              info.borderStyle == 1
                ? 'solid'
                : info.borderStyle == 2
                ? 'dashed'
                : info.borderStyle == 3
                ? 'dotted'
                : ''
            } ${info.style.borderColor}`,
            // height: '1px',
          }"
        ></view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    info: {
      default: {},
    },
  },
  mounted() {
    console.log(this.info);
  },
};
</script>

<style lang="scss" scoped>
.borderModule {
  //   cursor: move;
  position: relative;
  .info1 {
    width: 100%;
  }
}
</style>
